<!DOCTYPE html>
<html>
<head>
    <title> 曲江新区导游讲解员大赛 </title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta http-equiv="X-UA-Compatible" content="IE=7">
	<!-- iphone safari -->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes" /> 
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />       
	<meta content="black" name="apple-mobile-web-app-status-bar-style" />  
	<meta content="telephone=no" name="format-detection" /> 
    <link rel="apple-touch-icon" size="72x72" href="images/icon.png"/>
	<meta name="Author" contect="Mr.He"/ >

	<link rel="stylesheet" type="text/css" href="css/jqm-1.1.1.min.css">

    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>   
    <link rel="stylesheet" type="text/css" href="css/index.css">
	<script src="js/jqm-1.1.1.min.js"></script>
    <script type="text/javascript"> 
      
        var intervalImg = null;//轮转函数
        var imgCount = 14;//图片数量
        var btnTag = 0; //开关标识.0为关,1为开
        var imgIndex = 1; //图片自定义索引
        var imgArrays = []; //图片数组
        var speed=150;//速度 (单位毫秒)
		var changeImgTime=7000;
        var displayWidth= 800;
        var displayHeight= 600;
		var localIndex=window.localStorage.getItem("imgIndex");

        

        jQuery(document).ready(function () { 
            console.log(localIndex);

			jQuery("#tapTest").live("taphold",function(){
				var pwd=prompt("Enter password");
				if(pwd=="c"){
					window.localStorage.removeItem("imgs");
				}
			}) 
        	displayWidth = jQuery(document).width();
            displayHeight =  jQuery(document).height();
            fillImg();
			init();
            jQuery(".showSelectedImgDiv").hide();
			
			$("#btnStart").bind("tap",function(e){
                e.preventDefault();
                var t=$(this).attr("alt");
				if (t == "on") {
					changeImg();//开始闪动
					$(this).attr("src","images/endBtn.png");
					$(this).attr("alt","off");
				}
				if (t == "off") {
					clearInterval(intervalImg);
					setTimeout(selectImgShow,300);
					$(this).attr("src","images/startBtn.png");
					$(this).attr("alt","on");
				}})
        });

        var init = function(){
        	jQuery(".showSelectedImgDiv").width(100);
        	jQuery(".showSelectedImgDiv").height(100); 
        	jQuery(".showSelectedImgDiv").css("left" , ((displayWidth - 100) / 2) ); 
        	jQuery(".showSelectedImgDiv").css( "top" , ((displayHeight - 100) / 2)); 
        	if (displayHeight > 601) { 
        		jQuery("#imgSet img").removeClass('img');
        		jQuery("#imgSet img").addClass('img_height');
        		
        	};
        }
        //图片轮转切换
        var changeImg = function () { 
			intervalImg = setInterval(function () {
				//随机数
				imgIndex=rand()*1;   
				 
				//随机数
				if(imgIndex!=localIndex && imgIndex!= 1 && imgIndex!= 13 && imgIndex != 8){
					showselect();
				} 
				 
                 
			}, speed)
        }

        var showselect=function(){
            jQuery("td[class!='btnTd'] img").addClass("img_back").removeClass("shine_shineRed");
            jQuery("td[class!='btnTd'] img").attr("tag",''); 
                 jQuery("#img" + imgIndex).attr({ 
                    "tag": "selected"
                }).addClass("shine_shineRed").removeClass('img_back');
        }
        var fillImg = function () {
            var imgTds=jQuery("td[class!='btnTd']");
            imgTds.children().remove();
            for (var i = 1; i <= imgCount; i++) {
                var img = jQuery("<img>");
                img.attr({ 
                    "src": "images/space"+i+".png", 
                    "target":"images/big_"+i+".jpg",
                    "id": "img" + i
                }).addClass("img img_back");
                jQuery.each(imgTds,function(index,items){
                    if(jQuery(items).attr("class")==img.attr("id")){
                        img.appendTo(jQuery(items));
                    }
                })
               
            } 
        }
		
        //展示抽中图片
        var selectImgShow = function () {
            jQuery(".showSelectedImgDiv").children().remove();
            //在imgSet中寻找tag为selected的图片 
            // console.log(jQuery("td img[tag='selectedxx']").length==0);
            if (jQuery("td img[tag='selected']").length==0) {
                imgIndex=rand()*1; 
                if(imgIndex==localIndex){
                    imgIndex=rand()*1; 
                } 
                jQuery("#img" + imgIndex).attr({ 
                    "tag": "selected"
                })
            };
            var img = jQuery("<img>");
            img.attr({
            	"width": "100%",
                "height": "100%",
                "src": jQuery("td img[tag='selected']").attr("target"),
                "tag": jQuery("td img[tag='selected']").attr("tag"),
                "id": jQuery("td img[tag='selected']").attr("id")
            }); 
			var backDiv=jQuery("<div>");
			backDiv.addClass("backDiv").bind("click", function () {
                window.localStorage.removeItem("imgIndex");
                window.sessionStorage.removeItem("rand");
                window.location.href="index.html";
			});
            img.appendTo(jQuery(".showSelectedImgDiv"));
			
            
            jQuery(".showSelectedImgDiv").css({left: 0,top: 0,width: displayWidth,height: displayHeight}).show(); 

            

            setTimeout(function addBackDiv(){backDiv.appendTo(jQuery(".showSelectedImgDiv"));},300);
			setTimeout(function hideURLbar(){window.scrollTo(0,1);},0);
        }
		var rand=function(){
			var sessionRand=window.sessionStorage.getItem("rand"); 
			var r=parseInt(Math.random()*14+1);
			if(sessionRand==null && sessionRand*1!=r){
				window.sessionStorage.setItem("rand",r);
				return r;
			}
			r=parseInt(Math.random()*14+1); 
			return r;
		}
    </script>
</head>
<body>
<div class="showSelectedImgDiv"></div>
<div style="margin:0px auto;text-align: center"><img src="images/banner.png" width="100%" height="160" onClick="javascript:window.location.href='index.html'"/></div>
<div id="imgSet" style="margin:0; width: 100%; text-align:center;">
  <table width="100%" cellspacing="1" cellpadding="1">
  <tr style="height: 136px;">
    <td class="img1" ></td>
    <td class="img2"></td>
    <td class="img3"></td>
    <td class="img4"></td>
    <td class="img5"></td>
  </tr>
  <tr style="height: 136px;">
    <td class="img14"></td>
    <td colspan="3" rowspan="2" class="btnTd">
    	 <img src="images/startBtn.png" id="btnStart" alt="on"/>
    </td>
    <td class="img6"></td>
  </tr>
  <tr style="height: 136px;">
    <td class="img13"></td>
    <td class="img7"></td>
  </tr>
  <tr style="height: 136px;">
    <td class="img12"></td>
    <td class="img11"></td>
    <td class="img10"></td>
    <td class="img9"></td>
    <td class="img8"></td>
  </tr>
</table>
</div>
</body>
</html>